<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link rel="stylesheet" href="/statics/element/index.css">
    <link rel="stylesheet" href="/statics/css/index.css">
</head>
<style>
    body::-webkit-scrollbar {
        display: none;
    }
     .el-notification {
         width: 400px;
         height: 250px;

     }
    .notify_css {
        font-size: 24px;
        padding: 20px;
        line-height: 150%;
    }


</style>
<body>
<div id="app" v-cloak>
    <el-container>
        <el-aside :style="menu_width">

            <div id="aside_logo"><i class="el-icon-menu"></i> <span v-show="open_menu_type"></span></div>
            <transition name="el-zoom-in-center">
                <el-menu
                        default-active="0"
                        class="left_menu"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#20222a"
                        text-color="#fff"
                        active-text-color="#2d8cf0"
                        :collapse="isCollapse"
                        :style="menu_width"
                        unique-opened
                        default-openeds="[1]"
                >
                    <el-menu-item v-for="(item,index) in nav_data" :key="index" :index="item.id" v-if="!item.is_child" @click="jump_main(item.url,item.menu_name,'')">
                        <i :class="item.ico" v-if="item.ico"></i>
                        <span slot="title">{{item.menu_name}}</span>
                    </el-menu-item>

                    <el-submenu v-for="(item,index) in nav_data" :key="index" :index="item.id" v-if="item.is_child">
                        <template slot="title">
                            <i :class="item.icon" v-if="item.ico"></i>
                            <span>{{item.menu_name}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(s,i) in item.list" :key="i" :index="s.id" @click="jump_main(s.url,item.menu_name,s.menu_name)"><i :class="s.ico" v-if="s.icon"></i>{{s.menu_name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </transition>
        </el-aside>
        <el-container>
            <el-header style="min-width: 1000px;">
                <el-row>
                    <el-col :span="8">
                        <div id="top_breadcrumb">
                            <a href="javascript:;" :class="open_menu_btn" style="font-size: 26px;" @click="open_menu"></a>
                            <span class="color_gray m_left">{{breadcrumb_a}} / </span>
                            <span class="color_gray">{{breadcrumb_b}}</span>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="el-menu-top">
                            <span class="company_title"><i class="el-icon-s-home" style="font-size: 16px;"></i> 后台管理</span>
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <img width="35" height="35" :src="avatar!=''?'/uploads/'+avatar:'/statics/img/user_pic.jpg'" >
                                    {{username}}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item><a @click="jump_main('host/admin/account_center','个人中心','个人设置')"><i class="el-icon-s-custom"></i> 个人中心</a></el-dropdown-item>
                                    <el-dropdown-item><a @click="login_out"><i class="el-icon-switch-button"></i> 退出登录</a></el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main :style="defaultHeight">
                <iframe id="index_iframe" :src="main_url"></iframe>
            </el-main>
        </el-container>
    </el-container>


</div>
<script src="/statics/vue/vue.min.js"></script>
<script src="/statics/element/index.js"></script>
<script src="/statics/js/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data(){
            return {
                main_url:'/system/user_list',
                open_menu_type: true,
                isCollapse:false,
                breadcrumb_a:'首页',
                breadcrumb_b:'',
                defaultHeight: {
                    height: ""
                },
                centerDialogVisible:true,
                menu_width:{
                    width: '220px',
                    transaction:0.3
                },
                open_menu_btn:'el-icon-s-fold',
                nav_data:[(${sysMenuList})],
                avatar:'[(${avatar})]',
                username:'[(${username})]'
            }
        },
        mounted() {
            const iframe = document.querySelector('#index_iframe')
        },
        methods: {
            getHeight() {
                this.defaultHeight.height = window.innerHeight - 60 + "px";
            },
            handleOpen(key, keyPath) {
            },
            handleClose(key, keyPath) {

            },
            open_menu() {
                if (this.isCollapse) {
                    this.menu_width.width = '220px';
                    this.open_menu_btn = 'el-icon-s-fold';
                    this.isCollapse = false;
                    this.open_menu_type = true;
                } else {
                    this.menu_width.width = '68px';
                    this.open_menu_btn = 'el-icon-s-unfold';
                    this.isCollapse = true;
                    this.open_menu_type = false;
                }
            },
            jump_main(url,a,b) {
                this.breadcrumb_a = a;
                this.breadcrumb_b = b;
                document.getElementById('index_iframe').src=url;
            },
            login_out(){
                window.location.href='/login_out';
            },
        },
        created() {
            //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
            window.addEventListener("resize", this.getHeight);
            this.getHeight();
        },
    });


</script>
</body>
</html>
